<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style type="text/css">
			.box{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: hotpink;
				transition:all 3s linear
			}
			.box:hover{
				transform: skew(45deg);
			}
			.bigbox{
				width: 100%;
				height: 500px;
				background-color: antiquewhite;
			}
			.bigbox .lebox{
				position: absolute;
				top: 50%;
				left: -80%;
				transform: translateY(-50%);
				width: 80px;
				height: 80px;
				background-color: aqua;
				transition: all 1s linear;
			}
			.bigbox:hover .lebox{
				left: 0;
			}
			
		</style>
	</head>
	<body>
		<!-- 转换： transfrom
		1. 位移translate
		 2.缩放：scale
		 3. 倾斜skew
		 4.旋转rotate:正数顺时针旋转，负数逆时针旋转-->
		<div class="box"></div>
		<div class="bigbox"></div>
	</body>
</html>
